<template>
  <d2-container>
    <search_main :list="formLine" :search="queryForm"/>
    <el-card style="margin-top: 10px">
    <el-table v-loading="loading" :data="list" size="mini" style="width: 100%" empty-text="暂无日志信息" stripe  >
      <!-- 时间 -->
      <el-table-column prop="createTime" label="请求时间"></el-table-column><!-- 信息 -->
      <el-table-column prop="url" label="接口地址"></el-table-column>
      <el-table-column prop="moduleName" label="所属模块"></el-table-column>
      <el-table-column prop="title" label="接口描述"></el-table-column>
      <el-table-column  label="接口类型">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type===1" type="warning" effect="plain">公开接口</el-tag>
          <el-tag v-if="scope.row.type===2" type="success" effect="plain">鉴权接口</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="methodType" label="请求方式" ></el-table-column>
      <el-table-column prop="ip" label="IP"></el-table-column>
      <el-table-column prop="userName" label="请求人" ></el-table-column>
      <el-table-column prop="times" label="耗时">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.times<50" type="success" effect="plain">{{ scope.row.times }} ms</el-tag>
          <el-tag v-if="scope.row.times>50&&scope.row.times<100" type="warning" effect="plain">{{ scope.row.times }} ms</el-tag>
          <el-tag v-if="scope.row.times>100" type="danger" effect="plain">{{ scope.row.times }} ms</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="code" label="响应code/错误原因" >
        <template slot-scope="scope">
          <span v-if="!scope.row.errorMsg||scope.row.errorMsg===''">{{scope.row.code}}</span>
          <text-popover v-else :text="scope.row.errorMsg"  :width="300" :text-style="'width:180px;'"></text-popover>
        </template>
      </el-table-column>
      <el-table-column prop="requestParam" label="请求参数" width="200px">
        <template slot-scope="scope">
          <text-popover :text="scope.row.requestParam" :title="'请求参数'" :width="'300'" :text-style="'width:180px;'"></text-popover>
        </template>
      </el-table-column>
      <!-- 查看详情 -->
    </el-table>
      <el-divider></el-divider>
    <paging :page="page" :currentChange="currentChange" :sizeChange="sizeChange"/>
    </el-card>
  </d2-container>
</template>

<script>
import { logPage } from '@/api/system/logs'
// eslint-disable-next-line camelcase
import search_main from '@/views/components/select-form'
import paging from '@/views/components/paging'
import textPopover from '@/views/components/text_popover'

export default {
  components: {
    // eslint-disable-next-line vue/no-unused-components
    search_main,
    paging,
    textPopover
  },
  data () {
    return {
      loading: false,
      formLine: [
        { type: 'input', key: 'url', label: '接口地址', dataType: 'string' },
        { type: 'input', key: 'title', label: '接口描述', dataType: 'string' },
        { type: 'input', key: 'ip', label: 'IP', dataType: 'string' },
        { type: 'input', key: 'moduleName', label: '模块名称', dataType: 'string' },
        { type: 'input', key: 'methodType', label: '请求方式', dataType: 'string' },
        { type: 'input', key: 'code', label: '响应code', dataType: 'string' },
        {
          type: 'radio',
          key: 'type',
          label: '接口类型',
          dataType: 'string',
          options: [{
            value: '1',
            label: '公开接口'
          }, {
            value: '2',
            label: '鉴权接口'
          }]
        }
      ],
      page: {
        size: 10,
        total: 0,
        current: 1
      },
      formParam: {},
      list: []
    }
  },
  created () {
    this.initList()
  },
  methods: {
    initList () {
      this.loading = true
      logPage({ ...this.formParam, ...this.page }).then(e => {
        if (e && e.records) {
          this.list = e.records
          this.page = {
            current: parseInt(e.current),
            size: parseInt(e.size),
            total: parseInt(e.total)
          }
          this.loading = false
        }
      })
    },
    queryForm (e) {
      this.formParam = e
      this.initList()
    },
    sizeChange (count) {
      this.page.size = count
      this.initList()
    },
    currentChange (count) {
      this.page.current = count
      this.initList()
    }
  }
}
</script>
